UI Testing Explained

UI stands for user interface. There are two types of user interface:

• the Command Line Interface (CLI) and

• the Graphical User Interface (GUI).
  Graphical user interface is the graphical layout of the application. It consists of the text the user reads, the buttons and/or links the user clicks on, images, text input fields and all other elements the user interacts with. In this article, we will focus on GUI testing only.

UI testing means user interface testing. It is a testing technique used to identify user interface defects. The goal of UI testing is to verify that the UI provides users with corresponding access or browsing functions through the functions of the test object and that it meets company and/or industry standards. UI testing plays an important part in the software development process.

How do we conduct UI testing? Under normal circumstances, we conduct UI testing by directly comparing all the pages in an application with UI design assets to confirm that they are consistent. But, how do we test if there are no UI design assets provided? Below are some aspects that need to be considered during the UI testing process:

Layout

1. Verify the position of the elements on a page is correct - whether it’s centered, left-aligned, right-aligned, top-aligned, or bottom-aligned. For example, see the table below. The column “Name” is left-aligned, the column “Email Address” is center-aligned and the column “Age” is right-aligned.
   

Text

1. Verify the text on the pages is displayed correctly, not truncated or overlapping with each other.

2. Verify the text font is the same on all the pages, or at least from the same font family.

3. Verify the error messages displayed on the pages are easy to see, errors are normally in red. See the red error message below as an example:
   

Image

1. Verify the image is clearly shown, not broken.

2. Verify the image does not appear stretched or squeezed.

3. Verify the image alignment is correct on the page, whether it’s centered, left-aligned, right-aligned, etc.

4. Verify the image size is self-adaptive, i.e. under different sizes of mobile phone screens or web browser windows, the images can be displayed adaptively without stretching or squeezing.

5. Image and text should be well arranged and not overlapping. See the below screenshot as a good example of displaying image and text:
   

Text Box

1. Verify it has a placeholder text.

2. Verify there is a tooltip for the text box.
   See the below screenshot, the text input field has a placeholder text and no tooltip.
   

Single Selection (Radio Button)

1. Verify it has a default selected option.

2. Verify that the current option is automatically deselected when another option is selected.
   See the below screenshot, it has a default option and only one option can be selected.
   

Multiple Selection (Checkbox)

1. Verify that it has a default option.

2. When other options are selected, the current options should not be affected.

3. Verify that the selection takes effect by clicking the selection box or clicking the text label.
   See the below screenshot, multiple options can be selected.
   

Button

1. There should be different styles for non-clickable and clickable buttons. Look at the below buttons, the left one is not clickable, the right one is clickable.
   

Tab Bar

1. There should be different styles for the selected tab and the unselected tab. See the below screenshot as an example, the “ITEM ONE” tab is selected, the other two tabs are unselected.
   

Switch Control

1. There should be different styles for the OFF and ON states. See the screenshots of the iPhone Battery Setting, the OFF state is in gray.
   

Scroll Bar

1. There is no need to have scroll bars when the content on a page can be completely displayed.

2. When a page cannot be displayed, a scroll bar is required, and the style of the scroll bar must be consistent with the overall style of the UI. See the below screenshot as an example - the scroll bar is displayed while scrolling down:
   

For web applications, UI testing should be conducted with commonly used web browsers. For mobile applications, UI testing should be conducted with different mobile devices supported by the mobile applications.